{% extends 'base_menu.html' %}
{% block title %}数据可视化 - {{ title }}{% endblock %}
{% block content %}
<div class="container-fluid">
    <h2>{{ title }}</h2>
    
    <div class="row mb-3">
        <div class="col-md-4">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title">传感器选择</h5>
                </div>
                <div class="card-body">
                    <select id="sensor-select" class="form-select">
                        <option value="">请选择传感器</option>
                        {% for sensor in sensors %}
                        <option value="{{ sensor.id }}">{{ sensor.name }} ({{ sensor.get_sensor_type_display }})</option>
                        {% endfor %}
                    </select>
                </div>
            </div>
        </div>
        
        <div class="col-md-4">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title">时间范围</h5>
                </div>
                <div class="card-body">
                    <div class="input-group mb-3">
                        <span class="input-group-text">开始</span>
                        <input type="date" id="start-date" class="form-control">
                    </div>
                    <div class="input-group">
                        <span class="input-group-text">结束</span>
                        <input type="date" id="end-date" class="form-control">
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-md-4">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title">操作</h5>
                </div>
                <div class="card-body">
                    <button id="load-data" class="btn btn-primary w-100">加载数据</button>
                    <button id="compare-data" class="btn btn-secondary w-100 mt-2">对比历史数据</button>
                </div>
            </div>
        </div>
    </div>
    
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title">{{ parameter_name }}数据图表</h5>
                </div>
                <div class="card-body">
                    <div id="data-chart" style="height: 500px;"></div>
                </div>
            </div>
        </div>
    </div>
</div>

{% block scripts %}
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
<script>
$(function() {
    const chart = echarts.init(document.getElementById('data-chart'));
    
    $('#load-data').click(function() {
        const sensorId = $('#sensor-select').val();
        const startDate = $('#start-date').val();
        const endDate = $('#end-date').val();
        
        if (!sensorId) {
            alert('请选择传感器');
            return;
        }
        
        $.get(`/api/sensor/${sensorId}/data/?start_date=${startDate}&end_date=${endDate}`, function(data) {
            updateChart(data);
        }).fail(function() {
            alert('加载数据失败');
        });
    });
    
    function updateChart(data) {
        const option = {
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['{{ parameter_name }}']
            },
            xAxis: {
                type: 'category',
                data: data.map(item => item.timestamp)
            },
            yAxis: {
                type: 'value',
                name: '{{ parameter_unit }}'
            },
            series: [{
                name: '{{ parameter_name }}',
                type: 'line',
                data: data.map(item => item.value),
                smooth: true
            }]
        };
        
        chart.setOption(option);
    }
});
</script>
{% endblock %}
{% endblock %}